// 大量任务调度
const btn = document.querySelector('.btn');
const label = document.querySelector('#warning');
function delay() {
  const duration = 5;
  const start = Date.now();
  while (Date.now() - start < duration) {
    // 模拟耗时5ms
  }
}

const n = 1000;
const tasks = new Array(n).fill(delay);

btn.onclick = async () => {
  label.textContent = '执行中...';
  const start = Date.now();
  await Promise.all(tasks.map((t) => runTask(t)));
  const end = Date.now();
  label.textContent = `执行完成，耗时：${end - start}毫秒`;
};

/**
 * 运行一个耗时任务
 * 如果要异步执行，请返回一个promise
 * 要尽快完成任务，同时不要让页面产生卡顿
 * 尽量兼容更多浏览器
 * @param {Function} task
 * @returns promise对象
 */
function runTask(task) {
  return new Promise(resolve => {
    _runTask1(task, resolve);
  });
}

function _runTask1(task, callback) {
  requestIdleCallback(idle => {
    if (idle.timeRemaining() > 0) {
      task();
      callback();
    } else {
      _runTask1(task, callback);
    }
  });
}
// eslint-disable-next-line
function _runTask2(task, callback) {
  let start = Date.now();
  requestAnimationFrame(() => {
    if (Date.now() - start < 16.6) {
      task();
      callback();
    } else {
      _runTask2(task, callback);
    }
  });
}

// 死循环
// for (;;) {
//   取出一个宏任务
//   执行所有的微任务
//   if (渲染时机是否到达) {
//     执行渲染
//   }
// }

// 宏任务(chrome使用宏任务可以，但是有卡顿，而且不能保证所有浏览器都是可以的，比如safari就不行)
// function runTask(task) {
//   return new Promise(resolve => {
//     setTimeout(() => {
//       task();
//       resolve();
//     }, 0);
//   });
// }

// 使用微任务(使用微任务就不行，所有的微任务会一块执行，耗时较长且阻塞页面)
// function runTask(task) {
//   return Promise.resolve().then(task);
// }
